<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .block {
                height: 2rem;
                width: 2rem;
            }
            #app {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <span
                v-for="(item,index) in records"
                class="block"
                :style="{
        backgroundColor:color[item.name]
        }"
                >{{index+1}}</span
            >
        </div>
    </body>
    <script type="module">
        import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.min.js";
        import { WishSystem } from "../dist/index.js";
        const pool = new WishSystem({
            star: [
                {
                    name: "四星",
                    rate: 0.072,
                    pitch: 10,
                },
                {
                    name: "五星",
                    rate: 0.01,
                    pitch: 90,
                },
            ],
            voidGift: {
                name: "三星",
            },
        });
        new Vue({
            el: "#app",
            data() {
                return {
                    records: [],
                    color: {
                        三星: "#99eefb",
                        四星: "purple",
                        五星: "yellow",
                    },
                };
            },
            mounted() {
                this.records = [...Array(100).keys()].map((i) => {
                    return pool.wish("1");
                });
                const high = 100000;
                const highRate = [...Array(high).keys()]
                    .map((i) => {
                        return pool.wish("1");
                    })
                    .reduce(
                        (col, cur) => {
                            col[cur.name]++;
                            return col;
                        },
                        {
                            五星: 0,
                            四星: 0,
                            三星: 0,
                        }
                    );

                console.log(this.records, pool.UserPool["1"], pool);

                console.group(`测试 ${high} 的情况`);
                console.log(highRate);
                Object.keys(highRate).forEach((key) => {
                    const rate = highRate[key] / high;
                    console.log(key, rate);
                });
                console.groupEnd();
            },
        });
    </script>
</html>
